<template>
	<div class="zco-view-request-container">
		<p :style="getStyle">{{ getMessage }}{{ getSendType }}</p>
		<template v-if="type === 'video' || subType === 'video'">
			<p>视频：<span style="color: #6384fe; cursor: pointer" @click="copyLink">点击复制</span></p>
		</template>
		<template v-else-if="type === 'page'">
			<p>链接：<span style="color: #6384fe; cursor: pointer" @click="copyLink">点击复制</span></p>
		</template>
		<template v-else-if="type === 'paper' || subType === 'pdf'">
			<p :style="getStyle">PDF:</p>
			<div @click="preview">
				<FileMessage :fileType="'pdf'" :fileName="fileName" />
			</div>
		</template>
		<template v-else-if="type === 'richtext'">
			<p>推送富文本内容：<span style="color: #6384fe; cursor: pointer" @click="openRichTextView">点击查看</span></p>
		</template>
		<template v-else-if="subType === 'text'">
			<p>富文本内容：<span style="color: #6384fe; cursor: pointer" @click="openRichTextView">点击查看</span></p>
		</template>
		<template v-else-if="subType === 'image'">
			<p>图片：<span style="color: #6384fe; cursor: pointer" @click="copyLink">点击复制</span></p>
		</template>
	</div>
</template>
<script>
import ZcoIM from '../../../index';
import FileMessage from '@/components/ChatMessage/FileMessage.vue';
import zcoIMEvent from '@/store/event';
export default {
	name: 'APP',
	components: { FileMessage },
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		type: {	
			type: String,
			default: () => ''
		},
		url: {
			type: String,
			default: () => ''
		},
		fileName: {
			type: String,
			default: () => ''
		},
		fromUserName: {
			type: String,
			default: () => ''
		},
		richTextData: {},
		subType: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getMessage() {
			return `向${this.toUserRole === 'customer' ? '访客' : '坐席'} <${this.toUserName}> `;
		},
		getSendType() {
			switch (this.type) {
				case 'page':
					return '推送链接';
				case 'video':
					return '推送视频';
				case 'paper':
					return '推送PDF';
				case 'richtext':
					return '推送富文本';
				case 'knowledgeBase':
					if (this.subType === 'video') {
						return '推送知识库';
					} else if (this.subType === 'pdf') {
						return '推送知识库';
					} else if (this.subType === 'text') {
						return '推送知识库';
					} else if (this.subType === 'image') {
						return '推送知识库';
					} else {
						return '';
					}
				default:
					return '';
			}
		},
		getStyle() {
			if ((ZcoIM.agent && this.fromUserName === ZcoIM.agent.userName) || (ZcoIM.client && this.fromUserName === ZcoIM.client.userName)) {
				return 'text-align: right;';
			} else {
				return '';
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		preview() {
			zcoIMEvent.emitPreview({ type: 'pdf', url: this.url });
		},
		openRichTextView() {
			zcoIMEvent.emitPreview({ type: 'richText', url: this.richTextData.content });
		},
		copyLink() {
			let copyInput = document.createElement('input'); //创建input元素
			document.body.appendChild(copyInput); //向页面底部追加输入框
			copyInput.setAttribute('value', this.url); //添加属性，将url赋值给input元素的value属性
			copyInput.select(); //选择input元素
			document.execCommand('Copy'); //执行复制命令
			this.$zcoMessage({
				type: 'success',
				message: `已复制链接`,
				duration: 3
			});
			//复制之后再删除元素，否则无法成功赋值
			copyInput.remove(); //删除动态创建的节点
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-view-request-container p {
	margin: 0;
}
</style>
